<template>
  <div class="photo_list">
    <BackNavigation v-bind:title-info="titleInfo"/>
    <ul class="photo_list_container" v-if="photoList.length">
      <li v-for="item in photoList">
        <PhotoCellVue v-bind:photo-item="item"/>
      </li>
    </ul>
    <p v-if="!nullShow">{{ isLoading ? '加载中...' : '没有更多了...' }}</p>
    <NoDataVue v-bind:vue-info="noDataInfo" v-if="nullShow"/>
  </div>
</template>

<script>
  import * as recommend from 'api/recommend'
  import BackNavigation from './navigation.vue'
  import NoDataVue from './no_data.vue'
  import PhotoCellVue from  './photo_cell.vue'
  import {get_cookie} from 'assets/cookie/cookie'

  export default {
    name: 'photo_list',
    components: {
      BackNavigation,
      PhotoCellVue,
      NoDataVue
    },
    computed: {
      nullStatus () {
        if (this.photoList) {
          return (this.photoList.length === undefined || this.photoList.length === 0)
        } else {
          return (this.photoList === undefined)
        }
      }
    },
    data () {
      return {
        photoList: [],
        nullShow: false,
        isLoading: true,
        isMore: false,
        titleInfo: {
          leftTitle: '返回',
          title: '照片记录',
          rightTitle: ''
        },
        noDataInfo: {
          title: '没有数据啊',
          iconUrl: '../../assets/img/common/no_data.png'
        }
      }
    },
    created () {
    },
    activated () {
      this.$indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
      })
      let params = {
        token: get_cookie('key')
      }
      recommend.get_order_photo_list(params).then(resault => {
        this.isMore = false
        this.isLoading = false
        console.log('sucess')
        this.$indicator.close()
        if (resault.status === 200) {
          this.photoList = resault.data.data
          if (this.photoList.length) {
            this.nullShow = false
          } else {
            this.nullShow = true
          }
        } else {
          this.nullShow = true
        }
      }).catch(resault => {
        this.nullShow = true
        this.isMore = false
        this.isLoading = false
        console.log('failed')
        this.$indicator.close()
        console.log(resault)
      })
    }
  }
</script>

<style lang="scss">
  div.photo_list {
    padding-top: 44px;
    position: relative;
    height: auto;
    width: 100%;
    background-color: white;

    >ul.photo_list_container {
      width: 100%;
      height: auto;

      >li {
        width: 100%;
        height: 100px;
        list-style: none;
        margin-top: 10px;
        padding: 0 15px 0 15px;
      }
    }

    >p {
      height: 44px;
      line-height: 44px;
      color: rgb(133, 133, 133);
      font-size: 12px;
    }
  }
</style>
